import Icon from '@/components/Icon';
import { transformConfig } from '@/utils/customModule';
import { Image, Swiper, SwiperItem, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import { StoreNoticeIconType, StoreNoticeScroll } from './constants';
import styles from './index.module.scss';

const styleConfig = {
  background: 'backgroundColor',
  content: ['color'],
  splitLine: [
    {
      backgroundColor: 'color',
    },
  ],
};

const NoticeItem = ({ style, type, content, imgUrl, iconUrl, iconColor, url }) => {
  return (
    <View
      className="notice-item"
      onClick={() => {
        if (url) {
          Taro.navigateTo({ url });
        }
      }}
    >
      {type === StoreNoticeIconType.icon && (
        <>
          <Icon className="icon" name={iconUrl} size={20} color={iconColor} />
          <View className="split-line" style={style.splitLine}></View>
        </>
      )}
      {type === StoreNoticeIconType.custom && <Image className="icon-img" src={imgUrl} />}

      <View className="notice-content omit-1" style={style.content}>
        {content}
      </View>
    </View>
  );
};

const ModuleStoreNotice = ({ componentCfg: { styleSettingRender, content: config } = {} }) => {
  const style = transformConfig(styleSettingRender, styleConfig);
  const { color } = styleSettingRender;

  return (
    <View className={styles.ModuleStoreNotice} style={{ ...style.module, ...style.background }}>
      {config?.items?.length === 1 ? (
        <NoticeItem
          {...{
            style,
            type: config?.type,
            iconColor: color,
            ...config?.items?.[0],
          }}
        />
      ) : (
        <Swiper
          className="notice-wrap"
          circular
          autoplay={config?.items.length > 1}
          vertical={styleSettingRender.scroll === StoreNoticeScroll.up}
          interval="3000"
        >
          {config?.items.map((item, index) => {
            return (
              <SwiperItem key={index}>
                <NoticeItem
                  {...{
                    style,
                    type: config?.type,
                    iconColor: color,
                    ...item,
                  }}
                />
              </SwiperItem>
            );
          })}
        </Swiper>
      )}
    </View>
  );
};

export default ModuleStoreNotice;
